<!--tx动漫列表-->
<template>
	<el-row >
		<el-col :span="6">
			<el-image class="img"  :src=" itemInfo.img"  >
			</el-image>
		</el-col>
		<el-col :span="11">
			<div class="title font-600 "  >{{ itemInfo.title }}</div>
			 <div class="tag"><span class="tag-name">类型：</span>{{ itemInfo.cateName }}</div>

			 <div class="tag"><span class="tag-name">声优：</span>{{ itemInfo.authorName }}</div>
			 <div class="tag"><span class="tag-name">角色：</span>{{ itemInfo.role }}</div>
			 <div class="tag"><span class="tag-name">别名：</span>{{ itemInfo.anotherName }}</div>
			<div class="tag ">
				<span class="tag-name">简介：</span>
				{{itemInfo.introduction}}
			</div>
			<div>
				<el-button type="primary" @click="behavior">{{ state.stat ? "取消收藏":"我要收藏"}}</el-button>
			</div>
		</el-col>
		<el-col :span="7">
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { userLogin } from '~/stores/userLogin'
const  emit = defineEmits(['userHeader'])
const props = defineProps(<any>{
	itemInfo: Object, // 接收传递的 hotList 属性，类型为数组
});
const  state = reactive({
	stat: false,
})
watch(
	() => props.itemInfo,
	(newValue) => {
		if (newValue) {
			isBehavior(); // itemInfo 有值时调用函数
		}
	},
	{ immediate: true } // 设置为立即执行，确保首次加载时也调用
);

function to(){
	emit('userHeader')
}


function behavior() {
	 if (state.stat){
		 http.delete(`/behavior/${props.itemInfo.id}`).then(res =>{
			 isBehavior()
			 toast.success("取消成功！")
		 })
	 }else {
		 http.post(`/behavior/${props.itemInfo.id}`).then(res =>{
			 isBehavior()
			 toast.success("收藏成功！")
		 })
	 }
}
function isBehavior() {
	http.get(`/behavior/${props.itemInfo.id}`).then(res =>{
		state.stat = res.data
	})
}

onMounted(() => {

	if (userLogin().isLogin && props.itemInfo) {
		isBehavior(); // 在组件挂载时调用函数
	}
});

</script>
<style scoped>
.img{
	width: 230px;
	height: 340px;
	border-radius: 10px;
}
.title{
	color: rgb(51, 51, 51);
	font-size: 22px;
	padding-bottom: 5px;
}
.tag{
	font-size: 16px;
	padding-bottom: 10px;
	.tag-name{
		font-weight: 400;
		color: #999;
	}
}
.introduction{
	width: 100%;
	color: #999;
	text-indent: 2em; /* 首行缩进两格 */
}
</style>
